<%@ page language="java" pageEncoding="utf-8"%>

<!--/*** CSS样式 **/-->
<link rel="stylesheet" href="/jn-report/resources/paramquery-pro/pqgrid.min.css">
<link rel="stylesheet" href="/jn-report/resources/paramquery-pro/pqgrid.ui.min.css">
<link rel="stylesheet" href="/jn-report/resources/paramquery-pro/themes/steelblue/pqgrid.css">
<!--/*** JS脚本 **/-->
<script src="/jn-report/resources/paramquery-pro/pqgrid.min.js" type="text/javascript"></script>
<script src="/jn-report/resources/FileSaver/FileSaver.min.js" type="text/javascript"></script>
<script src="/jn-report/js/com/pgrid.js" type="text/javascript"></script>


<!--&lt;!&ndash;/*** CSS样式 **/&ndash;&gt;-->
<!--<link rel="stylesheet" href="/jn-report/resources/paramquery-pro-new/pqgrid.min.css">-->
<!--<link rel="stylesheet" href="/jn-report/resources/paramquery-pro-new/pqgrid.ui.min.css">-->
<!--<link rel="stylesheet" href="/jn-report/resources/paramquery-pro-new/themes/steelblue/pqgrid.css">-->
<!--&lt;!&ndash;/*** JS脚本 **/&ndash;&gt;-->
<!--<script src="/jn-report/resources/paramquery-pro-new/pqgrid.min.js" type="text/javascript"></script>-->
<!--<script src="/jn-report/resources/FileSaver/FileSaver.min.js" type="text/javascript"></script>-->
<!--<script src="/jn-report/js/com/pgrid.js" type="text/javascript"></script>-->

<!--<script src="/jn-report/resources/paramquery-pro-new/angular/ng.pqgrid.min.js" type="text/javascript"></script>-->
<!--<script src="/jn-report/resources/paramquery-pro-new/javascript-detect-element-resize/jquery.resize.js" type="text/javascript"></script>-->
<!--<script src="/jn-report/resources/paramquery-pro-new/jsZip-2.5.0/jszip.min.js" type="text/javascript"></script>-->
<!--<script src="/jn-report/resources/paramquery-pro-new/jszip-utils-0.0.2/jszip-utils.min.js" type="text/javascript"></script>-->
<!--<script src="/jn-report/resources/paramquery-pro-new/knockout/ko.pqgrid.min.js" type="text/javascript"></script>-->
<!--<script src="/jn-report/resources/paramquery-pro-new/touch-punch/touch-punch.min.js" type="text/javascript"></script>-->


<!--/*** 控件HTML标签 **/-->
<div class="col-xs-7">
    <div id="grid_parts" style="margin:20px auto;"></div>
</div>


<!--/*** pqGrid初始化事件 **/-->
<script>
    $(function () {
        var data = [[1, 'Exxon Mobil', '339938.0', '36130.0'],
            [2, 'Wal-Mart Stores', '315654.0', '11231.0'],
            [3, 'Royal Dutch Shell', '306731.0', '25311.0'],
            [4, 'BP', '267600.0', '22341.0'],
            [5, 'General Motors', '192604.0', '-10567.0'],
            [6, 'Chevron', '189481.0', '14099.0'],
            [7, 'DaimlerChrysler', '186106.3', '3536.3'],
            [8, 'Toyota Motor', '185805.0', '12119.6'],
            [9, 'Ford Motor', '177210.0', '2024.0'],
            [10, 'ConocoPhillips', '166683.0', '13529.0'],
            [11, 'General Electric', '157153.0', '16353.0'],
            [12, 'Total', '152360.7', '15250.0'],
            [13, 'ING Group', '138235.3', '8958.9'],
            [14, 'Citigroup', '131045.0', '24589.0'],
            [15, 'AXA', '129839.2', '5186.5'],
            [16, 'Allianz', '121406.0', '5442.4'],
            [17, 'Volkswagen', '118376.6', '1391.7'],
            [18, 'Fortis', '112351.4', '4896.3'],
            [19, 'Crédit Agricole', '110764.6', '7434.3'],
            [20, 'American Intl. Group', '108905.0', '10477.0'],
            [23, 'Americ2an Intl. Group', '108905.0', '10477.0']];

        var obj = {
            //宽度
            width: (winWidth-300),
            //width: '100%',
            //width : 'flex',
            height: 360,
            //height : 'flex',
            //X轴滑轮
            scrollModel: { autoFit: false },
            //表格折叠;、列折叠、全屏折叠
            collapsible: {
                on: true,
                collapsed: false,
                toggle: true,
            },
            showTop: true,
            showHeader: true,
            title: "Grid Title",
            showTitle : true,
            showToolbar : true,
            //表格圆角
            roundCorners: false,
            collapsible : true,
            columnBorders : true,
            rowBorders : true,
            stripeRows : true,
            numberCell: {
                show: true,
                width: 40
            },
            hoverMode: 'row',
            menuIcon: true,
            //表格大小可调整
            resizable: false,
            hwrap: false,
            wrap: false,
            dragColumns: {enabled: true},
            //分页
//            pageModel: {
//                type: "local",
//                rPP: 20, strRpp: "{0}",
//                strDisplay: "{0} - {1}  总数据:{2}",
//                strPage: "页数: {0} / {1}",
//                layout: ['first','prev', 'next','last', "|", "strPage"]
//            },
            //分页显示在上端
            //create: function (ui) {
            //    var $pager = this.pager().widget();
            //    if ($pager && $pager.length) {
            //        $pager = $pager.detach();
            //        this.widget().find(".pq-grid-top").append($pager);
            //    }
            //},
            //工具栏
            toolbar: {
                items: [
                    {
                        type: 'button',
                        width: 150,
                        label: "导出Excel",
                        icon: 'ion-ios-download-outline',
                        listener: function () {
                            //var format = 'xls',
                            //    blob = this.exportData({
                            //        format: format,
                            //        render: true
                            //    });
                            //if (typeof blob === "string") {
                            //    blob = new Blob([blob]);
                            //}
                            var format = 'xlsx',
                                blob = this.exportData({
                                    format: format,
                                    render: true,
                                    type: 'blob'
                                });
                            var excel_name = "Report_Excel.";
                            if (this.options.title != null && this.options.title != "" && this.options.title != 'undefined'){
                                excel_name = this.options.title + ".";
                            }
                            saveAs(blob, excel_name + format);
                        }
                    },{
                        type: "<span>共 0 条</span>",
                        width: 110
                    },{
                        type: 'button',
                        icon: 'ui-icon-print',
                        label: '打印',
                        listener: function () {
                            var exportHtml = this.exportData({ title: 'jQuery grid', format: 'htm', render: true }),
                                newWin = window.open('', '', 'width=1200, height=700'),
                                doc = newWin.document.open();
                            doc.write(exportHtml);
                            doc.close();
                            newWin.print();
                        }
                    }
                ]
            },
        };
        obj.colModel = [
            { title: "Rank", width: 200, dataType: "integer" },
            { title: "Company", dataType: "string" ,minWidth: 200},
            { title: "Revenues ($ millions)", width: 270, dataType: "float" },
            { title: "Profits ($ millions)", width: 270, dataType: "float" }
        ];
        obj.dataModel = { data: data };

        var grid = pq.grid("#grid_parts", obj);



//
//        function autoMerge(grid, refresh) {
//            var mc = [],
//                CM = grid.option("colModel"),
//                i = CM.length,
//                data = grid.option("dataModel.data");
//
//            while (i--) {
//                var dataIndx = CM[i].dataIndx,
//                    rc = 1,
//                    j = data.length;
//
//                while (j--) {
//                    var cd = data[j][dataIndx],
//                        cd_prev = data[j - 1] ? data[j - 1][dataIndx] : undefined;
//                    if (cd_prev !== undefined && cd == cd_prev) {
//                        rc++;
//                    }
//                    else if (rc > 1) {
//                        mc.push({ r1: j, c1: i, rc: rc, cc: 1 });
//                        rc = 1;
//                    }
//                }
//            }
//            var mergeCells = [
//                { r1: 1, c1: 0, rc: 5, cc: 1, style: 'background:#ffffaa;' },
//                { r1: 19, c1: 0, rc: 2, cc: 1, style: 'background:lightgreen;' }
//            ];
//
//            grid.option("mergeCells", mergeCells);
//            if (refresh) {
//                grid.refreshView();
//            }
//        };
//
//        autoMerge(grid, true);

    });
</script>